<template>
  <view class="main">
    <view class="form" v-for="(item, index) in formList" :key="index">
      <view class="title">用户{{ index + 1 }}</view>
      <view class="ip-item" v-for="(ipt, ipIndex) in item.form">
        <input
          :type="ipt.type"
          :placeholder="ipt.name"
          v-model="ipt.value"
          :maxlength="ipt.maxlength"
          placeholder-class="ip"
        />
      </view>
    </view>
    <view class="add" @click="addUser">
      <van-button
        icon="plus"
        type="primary"
        block
        text="添加"
        plain
        color="#0753fd"
      />
    </view>
  </view>

  <view class="btns">
    <Button
      @clickButton="carete"
      :loading="loading"
      loading-text="保存中"
      text="保存"
    />
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { PostJoinList } from "@/api/apiList";
import { onLoad } from "@dcloudio/uni-app";
const Ids = ref();
onLoad((e) => {
  if (e && e?.id) {
    Ids.value = e?.id;
  }
});
const formList = ref([
  {
    form: [
      { name: "请填写姓名", maxlength: 10, type: "text", value: "" },
      { name: "请填写单位/公司", maxlength: 20, type: "text", value: "" },
      { name: "请填写部门职位", maxlength: 15, type: "text", value: "" },
      { name: "请填写手机号", maxlength: 11, type: "number", value: "" },
    ],
  },
]);

const addUser = () => {
  formList.value.push({
    form: [
      { name: "请填写姓名", maxlength: 10, type: "text", value: "" },
      { name: "请填写单位/公司", maxlength: 20, type: "text", value: "" },
      { name: "请填写部门职位", maxlength: 15, type: "text", value: "" },
      { name: "请填写手机号", maxlength: 11, type: "number", value: "" },
    ],
  });
};

const loading = ref(false);
const newArray = ref([]);
const carete = async () => {
  console.log(formList.value, "form");
  formList.value.map((items) => {
    if (items.form?.length > 0) {
      newArray.value.push(items.form);
    }
  });
  for (let k in newArray.value) {
    for (let v in newArray.value[k]) {
      if (newArray.value[k][v].name == "请填写姓名") {
        newArray.value[k][v].name = "nickName";
      }
      if (newArray.value[k][v].name == "请填写手机号") {
        newArray.value[k][v].name = "phonenumber";
      }
      if (newArray.value[k][v].name == "请填写部门职位") {
        newArray.value[k][v].name = "department";
      }
      if (newArray.value[k][v].name == "请填写单位/公司") {
        newArray.value[k][v].name = "company";
      }
    }
  }
  let array = newArray.value.map((items) => {
    let newObject = {};
    return items.map((item) => {
      // return { [item.name]: item.value };
      return Object.assign(newObject, {
        [item.name]: item.value,
        circleId: Ids.value,
      });
    });
  });
  let uniqueDoubleArray = array
    .map((subarray) => removeDuplicatesFromArray(subarray))
    .flat();
  const response = await PostJoinList({
    memberList: uniqueDoubleArray,
  });
  if (response && response?.code == 200) {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
      uni.showToast({
        title: "提交成功",
        icon: "none",
      });
      uni.navigateBack({ delta: 1 });
    }, 800);
  }
};

const removeDuplicatesFromArray = (arr) => {
  return arr.filter((item, index, self) => {
    return (
      self.findIndex(
        (t) =>
          t.nickName === item.nickName &&
          t.company === item.company &&
          t.department === item.department &&
          t.phonenumber === item.phonenumber
      ) === index
    );
  });
};
</script>

<style lang="scss" scoped>
.main {
  padding: 30rpx 30rpx 200rpx 30rpx;

  .form {
    margin-bottom: 40rpx;

    .title {
      margin-bottom: 30rpx;
      font-family: PingFang SC Medium;
      font-size: 32rpx;
      color: #999999;
    }
  }

  .add {
    margin-top: 40rpx;
  }
}

.btns {
  padding: 30rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}
</style>
